<template>
  <div class="pos" >
    <i class="el-icon-menu"></i>
      <span class="shou"> 门店上货</span>
    <hr />

    <el-row>
      <el-col :span="10" class="pos-order" id="orderlist">
        <div class="left">
         条码 <el-input
            v-model="search"
            placeholder="请输入商品条码或扫码"
           :disabled="!checked"
              @keyup.enter.native="chaxun"
          ></el-input>
          <el-checkbox v-model="checked" >手动输入条形码</el-checkbox>
          <span class="ex">导入execl文件</span>
          <el-table
            border
            style="width: 100%"
            :data="data"
            :header-cell-style="{ background: '#909399', color: '#ffffff' }"
          >
            <el-table-column prop="id" label="流水号" align="center">
            </el-table-column>
            <el-table-column prop="barcode" label="条码"  
           
              width="200px"
              align="center">
            </el-table-column>
            <el-table-column prop="name" label="商品名称" align="center">
           
            </el-table-column>
          <el-table-column
              prop="unit"
              label="单位"
              width="100%"
              align="center"
            >
            </el-table-column>
            <el-table-column label="上货数量" prop="quantity" width="80"  align="center">
        <template slot-scope="scope">
          <div class="amount-warp">
            <input class="border" @input="cartGoodsAmountChange($event,scope.row)" v-model="scope.row.quantity"/>
            <div class="quick-button">
              <i class="border el-icon-arrow-up" @click="addAmountCount(scope.row)"></i>
              <i class="border el-icon-arrow-down" @click="subtractAmountCount(scope.row)"></i>
            </div>
          </div>
        </template>
      </el-table-column>

         
          </el-table>

        </div>
        <div class="btn">
          <el-button
            type="info"
            size="default"
            @click="checkout"
            >确定</el-button
          >
        </div>
    
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
  
      barcode:"",
      disabled: "",
      total: "",
      newTime: "",
      search: "",
      checked: false,
   data:[],
   updata:{
    barcode:[],
        quantity:[],
   },
      tableData: [
        // {
        //   id: "",
        //   quantity: "",
        //   barcode: "",
        //   unit: "",
        //   name:""
        // },
        // {
        //   id: 2,
        //   quantity: 10,
        //   price: 1,
        //   amount: 1,
        //     name:"kxt"
        // },
      ],
 
      
      
    };
  },

mounted(){
 
},
  methods: {
      // 商品数量加1
addAmountCount (orderInfo) {
  ++orderInfo.quantity
},
// 商品数量减1
subtractAmountCount (orderInfo) {
  if (orderInfo.quantity <= 0) {
    return this.$message.error('商品数量不能小于0')
  }
  --orderInfo.quantity
},

  //  getMsg() {
  //     this.$axios({
  //       url: "http://server.hloli.cn:23300/api/sSelProduct",
  //     }).then((res) => {
  //       if (res.data.code == 200) {
  //         if (res.data.data.length) {
  //           this.data = res.data.data;
  //           this.total = Math.ceil(res.data.data.length);
  //         }
  //       }
  //     });
  //   },


     chaxun(){
       
        this.$axios({
      url: "http://server.hloli.cn:23300/api/sSelProduct",
      method:"post",
      params:{
        barcode:this.search,
        
      }

    }).then((res) => {
      console.log(res);
      // this.data = res.data.data;
      this.data.push(res.data.data);
    
      console.log(this.data)
      if(res.data.code == 501){
        this.search = ""
      }
    });

    },

check(){
  this.checked = !this.checked;
},
    //模拟结账
    checkout() {
      const h = this.$createElement;
        this.$msgbox({
          title: '上货',
          message: h('p', null, [
            h('span', null, '是否确定上货 '),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 200);
              }, 2000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'success',
            message: '上货成功 ' 
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上货'
          });          
        });
      }
    
 
  },
};
</script>

<style scoped>
.pos{
    width: 80%;
    height: 100%;
    margin-left: 50px;
}
.dialog {
  border: none;
}
.el-dialog {
  padding: 20px;
}
.left{
    margin-left: 50px;
}
.pos-order {
  background-color: #f8f8fad8;
  height: 1000px;
  width: 100%;
  padding: 20px;
  margin-top: 15px;
}
.el-button{
  width: 180px;
  height: 35px;
  
}
.btn {
  padding-right: 10px;
  margin: center;
   margin-top: 85px;
  font-size: 30px;
}
.title {
  height: 20px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
  text-align: center;
}

.el-input {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
}
.el-button {
  padding-right: 20px;
}
.el-checkbox {
  padding: 20px;
}
.center {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.amount-warp {
  display: flex;
}
.border {
   width: 30px;
  border:none;

outline:medium;

}
.el-col {
  float: none;
}
hr{
 margin-top: 15px;
}
.el-icon-menu {
  font-size: 25px;
  color: #59595e;
 margin-top: 20px;
}
.shou{
 font-size: 16px;
 color: slategray;
}
.ex{
    padding-left: 100px;
    color: blue;
}
.el-col {
  display: flex;
  justify-content: space-between;
}

.customer-no-border-table th {
  border: none;
}

</style>
